:root {
  /* 主色调 - 清新蓝色系 */
  --primary-gradient: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
  --secondary-gradient: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
  
  /* 背景色 - 浅色渐变 */
  --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  --card-gradient: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
  
  /* 按钮渐变 - 活力蓝 */
  --button-gradient: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  --button-hover-gradient: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
  
  /* 菜单渐变 */
  --menu-gradient: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  --menu-active-gradient: linear-gradient(90deg, #40a9ff 0%, #1890ff 100%);
  
  /* 边框颜色 */
  --border-color: rgba(24, 144, 255, 0.15);
  
  /* 文字颜色 */
  --text-primary: #262626;
  --text-secondary: #595959;
  --text-light: #8c8c8c;
}

/* 全局样式 */
body {
  background: var(--bg-gradient);
  color: var(--text-primary);
}

/* 卡片样式 */
.el-card {
  background: var(--card-gradient);
  border: none;
  box-shadow: 0 2px 12px rgba(0, 40, 100, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.el-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 40, 100, 0.12);
}

/* 按钮样式 */
.el-button--primary {
  background: var(--button-gradient);
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 82, 204, 0.2);
}

.el-button--primary:hover {
  background: var(--button-hover-gradient);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 82, 204, 0.3);
}

/* 菜单样式 */
.el-menu {
  background: var(--menu-gradient);
  border-right: 1px solid var(--border-color);
}

.el-menu-item.is-active {
  background: var(--menu-active-gradient);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 82, 204, 0.2);
}

/* 表格样式 */
.el-table {
  background: var(--card-gradient);
  border: none;
  box-shadow: 0 2px 12px rgba(0, 40, 100, 0.08);
}

.el-table th {
  background: var(--secondary-gradient);
  color: white;
  font-weight: 500;
}

.el-table tr:hover > td {
  background: rgba(0, 82, 204, 0.05) !important;
}

/* 输入框样式 */
.el-input__wrapper {
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 40, 100, 0.05);
}

.el-input__wrapper:hover {
  border-color: #0052cc;
  box-shadow: 0 2px 8px rgba(0, 82, 204, 0.1);
}

.el-input__wrapper:focus-within {
  border-color: #0052cc;
  box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

/* 头像样式 */
.el-avatar {
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 40, 100, 0.15);
  transition: all 0.3s ease;
}

.el-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 40, 100, 0.2);
}

/* 分页样式 */
.el-pagination {
  .el-pagination__total {
    color: var(--text-secondary);
  }
  
  .el-pager li.is-active {
    background: var(--button-gradient);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 82, 204, 0.2);
  }
}

/* 对话框样式 */
.el-dialog {
  background: var(--card-gradient);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 40, 100, 0.1);
  overflow: hidden;
  
  .el-dialog__header {
    background: var(--secondary-gradient);
    color: white;
    padding: 20px;
  }
  
  .el-dialog__body {
    padding: 24px;
  }
}

/* 下拉菜单样式 */
.el-dropdown-menu {
  background: var(--card-gradient);
  border: none;
  box-shadow: 0 4px 16px rgba(0, 40, 100, 0.12);
}

.el-dropdown-menu__item:hover {
  background: rgba(0, 82, 204, 0.05);
}
  